<template>
	<view class="search-container">
		<!-- 头部搜索栏 -->
		<view class="header">
			<view class="search-box">
				<image class="search-icon" src="/static/icons/search.png"></image>
				<input 
					class="search-input" 
					type="text" 
					v-model="searchKeyword" 
					placeholder="搜索招标项目、服务商..." 
					auto-focus
					confirm-type="go"
					@confirm="handleSearch"
				/>
				<view class="clear-icon" v-if="searchKeyword" @tap="clearSearch">
					<image src="/static/icons/close.png"></image>
				</view>
			</view>
			<text class="cancel-btn" @tap="goBack">取消</text>
		</view>
		
		<!-- 搜索结果 -->
		<scroll-view class="search-results" scroll-y v-if="searchResults.length > 0">
			<view class="result-item" v-for="(item, index) in searchResults" :key="index" @tap="goToDetail(item)">
				<text class="result-title">{{ item.title }}</text>
				<view class="result-info">
					<text class="result-tag">{{ item.project_type }}</text>
					<text class="result-date">{{ item.created_at }}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 搜索历史 -->
		<view class="search-history" v-if="searchResults.length === 0 && searchHistory.length > 0">
			<view class="history-header">
				<text class="history-title">搜索历史</text>
				<text class="clear-history" @tap="clearHistory">清空</text>
			</view>
			<view class="history-list">
				<view class="history-item" v-for="(item, index) in searchHistory" :key="index" @tap="useHistoryItem(item)">
					<image class="history-icon" src="/static/icons/history.png"></image>
					<text class="history-text">{{ item }}</text>
				</view>
			</view>
		</view>
		
		<!-- 热门搜索 -->
		<view class="hot-search" v-if="searchResults.length === 0 && searchKeyword === ''">
			<text class="hot-title">热门搜索</text>
			<view class="hot-tags">
				<text class="hot-tag" v-for="(tag, index) in hotTags" :key="index" @tap="useHistoryItem(tag)">{{ tag }}</text>
			</view>
		</view>
		
		<!-- 无搜索结果 -->
		<view class="no-result" v-if="searched && searchResults.length === 0 && searchKeyword !== ''">
			<image class="no-result-image" src="/static/images/no-result.png"></image>
			<text class="no-result-text">没有找到相关结果</text>
			<text class="no-result-tip">请尝试其他关键词</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const searchKeyword = ref('');
const searchResults = ref([]);
const searchHistory = ref(['智能制造', '设备采购', '工程建设']);
const hotTags = ref(['设备采购', '软件开发', '工程建设', '技术服务', '原材料']);
const searched = ref(false);

const handleSearch = () => {
	if (!searchKeyword.value.trim()) return;
	
	// 模拟搜索请求
	searched.value = true;
	
	
	  uni.request({
	    url: 'http://115.190.38.218/go/api/v1/projtlist',
	    method: 'GET',
	    data: { "keyword":searchKeyword.value}, // 发送关键词参数
	    success(res) {
	      searchResults.value = res.data.data; // 假设返回{ data: { data: [...] } }
		  console.log("模糊匹配成功！",res)
	    },
		fail(err){
		console.log("请求失败：",err)	
		}
	  })
	
	// 添加到搜索历史
	if (!searchHistory.value.includes(searchKeyword.value)) {
		searchHistory.value.unshift(searchKeyword.value);
		if (searchHistory.value.length > 10) {
			searchHistory.value = searchHistory.value.slice(0, 10);
		}
	}
	
	// 模拟搜索结果
	if (searchKeyword.value.includes('设备') || searchKeyword.value.includes('智能')) {
		searchResults.value = [
			{
				id: 101,
				title: '工业用高精度机器人和自动化生产线设备采购项目',
				type: '招标项目',
				date: '2025-04-10'
			},
			{
				id: 102,
				title: '餐厅厨房设备更新招标',
				type: '招标项目',
				date: '2025-04-05'
			}
		];
	} else {
		searchResults.value = [];
	}
};

const clearSearch = () => {
	searchKeyword.value = '';
	searchResults.value = [];
	searched.value = false;
};

const useHistoryItem = (item) => {
	searchKeyword.value = item;
	handleSearch();
};

const clearHistory = () => {
	uni.showModal({
		title: '提示',
		content: '确定要清空搜索历史吗？',
		success: (res) => {
			if (res.confirm) {
				searchHistory.value = [];
			}
		}
	});
};

const goToDetail = (item) => {
	uni.navigateTo({
		url: `/pages/project/project-detail?id=${item.id}`
	});
};

const goBack = () => {
	uni.navigateBack();
};
</script>

<style>
.search-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	display: flex;
	flex-direction: column;
}

.header {
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
}

.search-box {
	flex: 1;
	height: 80rpx;
	background-color: #f0f2f5;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	margin-right: 20rpx;
}

.search-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 16rpx;
}

.search-input {
	flex: 1;
	height: 80rpx;
	font-size: 28rpx;
}

.clear-icon {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clear-icon image {
	width: 28rpx;
	height: 28rpx;
}

.cancel-btn {
	font-size: 28rpx;
	color: #1d4ed8;
}

.search-results {
	flex: 1;
}

.result-item {
	padding: 30rpx;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.result-title {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 16rpx;
	font-weight: 500;
}

.result-info {
	display: flex;
	justify-content: space-between;
}

.result-tag {
	font-size: 24rpx;
	background-color: rgba(29, 78, 216, 0.1);
	color: #1d4ed8;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.result-date {
	font-size: 24rpx;
	color: #999;
}

.search-history {
	padding: 30rpx;
}

.history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.history-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.clear-history {
	font-size: 26rpx;
	color: #999;
}

.history-list {
	display: flex;
	flex-direction: column;
}

.history-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1px solid #f0f0f0;
}

.history-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 16rpx;
}

.history-text {
	font-size: 28rpx;
	color: #333;
}

.hot-search {
	padding: 30rpx;
}

.hot-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 20rpx;
}

.hot-tags {
	display: flex;
	flex-wrap: wrap;
}

.hot-tag {
	font-size: 26rpx;
	color: #333;
	background-color: #f0f2f5;
	padding: 16rpx 30rpx;
	border-radius: 40rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}

.no-result {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.no-result-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.no-result-text {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 16rpx;
}

.no-result-tip {
	font-size: 26rpx;
	color: #999;
}
</style> 